﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/NoRightAd.Master" AutoEventWireup="true" EnableEventValidation="false" 
    CodeBehind="PostForSaleUploadPhoto.aspx.cs" Inherits="Foothill.Web.PostForSaleUploadPhoto" %>
    
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="post-common.css" type="text/css" />
    <link rel="stylesheet" href="upload.css" type="text/css" />
    
    <script type="text/javascript">
        
        var numOfPhotosUploaded = 0;
        var maxNumOfPhotos = 16;
        var BlankImageSrc = '../Images/space.gif';

        $(document).ready(function () {

            $('div.showcase').droppable({
                accept: 'img.upload-img',
                hoverClass: "ui-state-active",
                drop: handleCarDrop,
                over: dragOver,
                out: dragOut
            });

            $('img.upload-img').attr('src', BlankImageSrc);
            $('img.upload-img').draggable({ revert: true, zIndex: 99, cursor: "move" });

            $('span.del-span').hide();
            $('span.del-span').click(function () {
                var div = $(this).parent();
                removeUploadedPhoto(div);
            });

            $('#btnSubmit').click(submit);
        });

        function isImageEmpty(currentImage) {
            return currentImage === '' || currentImage == null || currentImage == BlankImageSrc;
        }

        function dragOver(event, ui) {
            var imgOver = $(this).find('img.upload-img');

            if (imgOver == null) {
                return;
            }

            var overImgSrc = imgOver.attr('src');
            if (!isImageEmpty(overImgSrc)) {
                $(this).addClass('drag-hover');
            }
        }

        function dragOut(event, ui) {
            $(this).removeClass('drag-hover');
        }

        function handleCarDrop(event, ui) {
            var imgDroppedOn = $(this).find('img.upload-img');

            if (imgDroppedOn == null) {
                return;
            }

            // get src of the img dropped on
            var droppedOnImgSrc = imgDroppedOn.attr('src');

            if (!isImageEmpty(droppedOnImgSrc)) {
                var draggedImgSrc = ui.draggable.attr('src');
                ui.draggable.attr('src', droppedOnImgSrc);
                imgDroppedOn.attr('src', draggedImgSrc);
                $(this).removeClass('drag-hover');
            }
        }

        function findAvailableTableCellNumber() {
            var number = 0;
            for (var i = 1; i <= 16; ++i) {
                var backImage = $('#img-' + i).attr('src');
                if (isImageEmpty(backImage)) {
                    number = i;
                    break;
                }
            }

            return number;
        }

        function showInTableCell(filename) {
            var number = findAvailableTableCellNumber();

            if (number > 0) {
                var imageUrl = "../upload_thumbnail/" + filename;
                $('#imgBtn-' + number).css('display', 'inline');
                $('#img-' + number).attr("src", imageUrl);
            }
        }

        function removeUploadedPhoto(div) {
            var img = div.find('img.upload-img');
            var imgUrl = img.attr('src');

            if (!isImageEmpty(imgUrl)) {
                var filename = extractFilename(imgUrl);
                filename = filename.substring(0, filename.lastIndexOf('.'));

                $.ajax({
                    type: "POST",
                    url: "PostForSaleUploadPhoto.aspx/DeleteUploadedPhoto",
                    data: '{"filenameNoExt": "' + filename + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function () {
                        var divId = div.attr('id');
                        var number = divId.split('-')[1];

                        var img = div.find('img.upload-img');
                        img.attr('src', BlankImageSrc);
                        $('#imgBtn-' + number).hide();
                    }
                });
            }
        }

        function submit() {
            var cars = new Array();
            var number;
            for (var i = 0; i < 16; ++i) {
                number = i + 1;
                var backImage = $('#img-' + number).attr('src');
                if (!isImageEmpty(backImage)) {
                    cars.push(extractFilename(backImage));
                }
            }

            if (cars.length == 0) {
                return;
            }

            var jsonText = JSON.stringify({ list: cars });

            $.ajax({
                type: "POST",
                url: "PostForSaleUploadPhoto.aspx/Submit",
                data: jsonText,
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });

            window.location.replace($('#lblNextStepUrl').text());
        }

        function extractFilename(imgUrl) {
            var fileNameIndex = imgUrl.lastIndexOf("/") + 1;
            var filename = imgUrl.substr(fileNameIndex);
            return filename;
        }

    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cph1" runat="server">

    <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" /> 
    
    <div id="post-ad-upload">   
        <table class="post-ad-steps">
            <tr>
                <td><span class="step-num other-step-num">1</span>基本信息</td>
                <td class="current-step"><span class="step-num current-step-num">2</span>添加照片</td>
                <td><span class="step-num other-step-num">3</span>预览发布</td>
            </tr>
        </table>   
        <asp:Label runat="server" Text="&nbsp;" ID="uploadResult" />

        <div id="ad-upload-top">
            <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1"
                runat="server" UploadedComplete="AsyncFileUpload1UploadedComplete" 
                Width="380px" CssClass="AsyncFileUpload1" UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" UploaderStyle="Traditional" />
            
            <asp:Label runat="server" ID="myThrobber" style="display:none;" >
                <img alt="" src="../Images/uploading.gif" />
            </asp:Label>

            <div id="showcase-divs">

                <div id="td-1" class="showcase">
                    <span id="imgBtn-1" class="del-span"></span>
                    <img id="img-1" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-2" class="showcase">
                    <span id="imgBtn-2" class="del-span"></span>
                    <img id="img-2" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-3" class="showcase">
                    <span id="imgBtn-3" class="del-span"></span>
                    <img id="img-3" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-4" class="showcase">
                    <span id="imgBtn-4" class="del-span"></span>
                    <img id="img-4" src="../Images/space.gif" class="upload-img" />
                </div>

                <div class="clear"></div>

                <div id="td-5" class="showcase">
                    <span id="imgBtn-5" class="del-span"></span>
                    <img id="img-5" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-6" class="showcase">
                    <span id="imgBtn-6" class="del-span"></span>
                    <img id="img-6" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-7" class="showcase">
                    <span id="imgBtn-7" class="del-span"></span>
                    <img id="img-7" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-8" class="showcase">
                    <span id="imgBtn-8" class="del-span"></span>
                    <img id="img-8" src="../Images/space.gif" class="upload-img" />
                </div>

                <div class="clear"></div>

                <div id="td-9" class="showcase">
                    <span id="imgBtn-9" class="del-span"></span>
                    <img id="img-9" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-10" class="showcase">
                    <span id="imgBtn-10" class="del-span"></span>
                    <img id="img-10" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-11" class="showcase">
                    <span id="imgBtn-11" class="del-span"></span>
                    <img id="img-11" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-12" class="showcase">
                    <span id="imgBtn-12" class="del-span"></span>
                    <img id="img-12" src="../Images/space.gif" class="upload-img" />
                </div>

                <div class="clear"></div>

                <div id="td-13" class="showcase">
                    <span id="imgBtn-13" class="del-span"></span>
                    <img id="img-13" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-14" class="showcase">
                    <span id="imgBtn-14" class="del-span"></span>
                    <img id="img-14" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-15" class="showcase">
                    <span id="imgBtn-15" class="del-span"></span>
                    <img id="img-15" src="../Images/space.gif" class="upload-img" />
                </div>
                <div id="td-16" class="showcase">
                    <span id="imgBtn-16" class="del-span"></span>
                    <img id="img-16" src="../Images/space.gif" class="upload-img" />
                </div>
            </div>

        </div>
        <div id="help-div">

            <ul>
                <li>上传至少一张照片</li>
                <li>照片大小不超过8MB</li>
                <li>第一张照片将被用作封面</li>
                <li>可拖放照片改变顺序</li>
            </ul>

        </div>

        <div class="clear"></div>

        <div id="next-step-btn">
            <asp:Label ID="lblNextStepUrl" runat="server" ClientIDMode="Static" />
            <asp:Label ID="lblUploadPhotoMessage" runat="server" CssClass="post-ad-validation" />
            <asp:Label ID="btnSubmit" runat="server" Text="下一步" class="btnSubmit" ClientIDMode="Static" />
        </div>

    </div>        

</asp:Content>
